<div class="content-container home">

    <div id="search-criteria-container">
        <div>
            <select
                    ng-model="selectedArchitecture"
                    ng-options="anArchitecture.code for anArchitecture in architectures">
            </select>
        </div>
        <div>
            <select
                    ng-model="selectedViewCriteriaTypeOption"
                    ng-options="aViewCriteriaTypeOptions.title for aViewCriteriaTypeOptions in viewCriteriaTypeOptions">
            </select>
        </div>
        <div ng-show="'CATEGORIES'==selectedViewCriteriaTypeOption.code">
            <span ng-show="!pkgCategories">...</span>
            <select
                    ng-show="pkgCategories"
                    ng-model="selectedPkgCategory"
                    ng-options="aPkgCategory.title for aPkgCategory in pkgCategories">
            </select>
        </div>
        <div>
            <input
                    ng-model="searchExpression"
                    autocomplete="off"
                    return-key-press="goSearch()"
                    placeholder="zlib"></input>
            <button ng-click="goSearch()">
                <message key="home.searchButton.title"></message>
            </button>
        </div>
    </div>

    <!-- RESULTS -->

    <div id="search-results-container">

        <div ng-show="pkgs.items && 0==pkgs.items.length" class="info-container">
            <strong><message key="home.noResults.title"></message>;</strong>
            <message key="home.noResults.description"></message>
        </div>

        <div ng-show="pkgs.items && pkgs.items.length" class="table-general-container">

            <div class="table-general-pagination-container">
                <pagination-control
                        link-count="9"
                        max="pkgs.max"
                        total="pkgs.total"
                        offset="pkgs.offset"></pagination-control>
            </div>

            <div class="muted">
                {{pkgs.total}}
                <span ng-switch="pkgs.total">
                    <span ng-switch-when="1"><message key="gen.pkg.title"></message></span>
                    <span ng-switch-default=""><message key="gen.pkg.title.plural"></message></span>
                </span>
            </div>

            <table class="table-general">
                <thead>
                <th></th>
                <th><message key="gen.pkg.title"></message></th>
                <th><message key="home.table.payloadlength.title"></message></th>
                <th><message key="home.table.rating.title"></message></th>
                <th><message key="home.table.version.title"></message></th>
                <th ng-show="'MOSTRECENT'==selectedViewCriteriaTypeOption.code"><message key="home.table.approximateVersionDate.title"></message></th>
                <th ng-show="'MOSTVIEWED'==selectedViewCriteriaTypeOption.code"><message key="home.table.versionViewCounter.title"></message></th>
                </thead>
                <tbody>
                <tr ng-repeat="pkg in pkgs.items">
                    <td><pkg-icon size="16" pkg="pkg"></pkg-icon></td>
                    <td>
                        <a href="" ng-click="goViewPkg(pkg)">
                            <highlighted-text
                                    value="pkg.title||pkg.name"
                                    search-expression="lastRefetchPkgsSearchExpression"
                                    search-expression-type="'CONTAINS'"></highlighted-text>
                        </a>
                        <span ng-show="shouldExplicitlyShowName(pkg)">
                            (<highlighted-text
                                value="pkg.name"
                                search-expression="lastRefetchPkgsSearchExpression"
                                search-expression-type="'CONTAINS'"></highlighted-text>)
                        </span>
                        <div ng-show="shouldShowSummary(pkg)">
                            <small class="muted">
                                <highlighted-text
                                        value="pkg.versions[0].summary"
                                        search-expression="lastRefetchPkgsSearchExpression"
                                        search-expression-type="'CONTAINS'"></highlighted-text>
                            </small>
                        </div>
                    </td>
                    <td>
                        <span class="muted">{{pkg.versions[0].payloadLength|dataLength}}</span>
                    </td>
                    <td>
                        <span ng-show="shouldShowDerivedRating(pkg)">
                            <rating-indicator rating="{{pkg.derivedRating}}"></rating-indicator>
                        </span>
                    </td>
                    <td><version-label version="pkg.versions[0]"></version-label></td>
                    <td ng-show="'MOSTRECENT'==selectedViewCriteriaTypeOption.code"><span class="muted">{{pkg.versions[0].createTimestamp|timestamp}}</span></td>
                    <td ng-show="'MOSTVIEWED'==selectedViewCriteriaTypeOption.code"><span class="muted">{{pkg.versions[0].viewCounter}}</span></td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>

<div class="footer"></div>
<spinner spin="shouldSpin()"></spinner>